<template>
    <div class="centerright">
      <div class="header">
        <div class="cityCanvaTitle">热门出发/到达城市排名</div>
        <div class="cityCanvaSelect">
          <select class="cityCanvaSelectContain" @change="changeOptionsItem">
            <option v-for="(item, index) in options" :value="item.value" :key="index">{{ item.label }}</option>
          </select>
        </div>
      </div>
      <div class="main">
        <ul>
          <li @click="changeIndexEvent(1)" :class="changeIndex == 1 ? 'click' : ''">出发城市</li>
          <li @click="changeIndexEvent(2)" :class="changeIndex == 2 ? 'click' : ''">到达城市</li>
        </ul>
      </div>
      <div id="centerCityCanvaMain"></div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, onMounted } from "vue";
  import * as echarts from "echarts";
  let changeIndex = ref(1);
  let changeOption = ref("今日");
  let data1 = ref([10, 12, 14, 16, 18, 20, 22, 23, 24, 25]);
  let barColor = ref("#679cf6");
  let options = [
    {
      value: "今日",
      label: "今日"
    },
    {
      value: "近一周",
      label: "近一周"
    },
    {
      value: "近一月",
      label: "近一月"
    }
  ];
  // 选项修改
  const changeIndexEvent = (index:any) => {
    console.log(index);
  changeIndex.value = index;
  if (index === 1) {
    if (changeOption.value === "今日") {
      barColor.value = "#679cf6";
      data1.value = [10, 12, 14, 16, 18, 20, 22, 23, 24, 25];
      canvasFunction();
    } else if (changeOption.value === "近一周") {
      barColor.value = "#ffa841";
      data1.value = [10, 12, 14, 16, 18, 20, 22, 25, 27, 35];
      canvasFunction();
    } else {
      barColor.value = "#de799b";
      data1.value = [15, 16, 20, 26, 28, 30, 32, 35, 37, 45];
      canvasFunction();
    }
  } else {
    if (changeOption.value === "今日") {
      barColor.value = "#679cf6";
      data1.value = [10, 12, 14, 16, 18, 25, 28, 33, 34, 35];
      canvasFunction();
    } else if (changeOption.value === "近一周") {
      barColor.value = "#ffa841";
      data1.value = [12, 16, 18, 20, 22, 27, 28, 33, 44, 55];
      canvasFunction();
    } else {
      barColor.value = "#de799b";
      data1.value = [20, 25, 28, 30, 35, 40, 48, 53, 64, 75];
      canvasFunction();
    }
  }
};
  // 下拉框变化
  const changeOptionsItem = (e: any) => {
  // console.log(e.target.value);
  if (e.target.value === "今日") {
    changeOption.value = "今日";
    if (changeIndex.value === 1) {
      barColor.value = "#679cf6";
      data1.value = [10, 12, 14, 16, 18, 20, 22, 23, 24, 25];
      canvasFunction();
    } else {
      barColor.value = "#679cf6";
      data1.value = [10, 12, 14, 16, 18, 25, 28, 33, 34, 35];
      canvasFunction();
    }
  } else if (e.target.value === "近一周") {
    changeOption.value = "近一周";
    if (changeIndex.value === 1) {
      barColor.value = "#ffa841";
      data1.value = [10, 12, 14, 16, 18, 20, 22, 25, 27, 35];
      canvasFunction();
    } else {
      barColor.value = "#ffa841";
      data1.value = [12, 16, 18, 20, 22, 27, 28, 33, 44, 55];
      canvasFunction();
    }
  } else {
    changeOption.value = "近一年";
    if (changeIndex.value === 1) {
      barColor.value = "#de799b";
      data1.value = [15, 16, 20, 26, 28, 30, 32, 35, 37, 45];
      canvasFunction();
    } else {
      barColor.value = "#de799b";
      data1.value = [20, 25, 28, 30, 35, 40, 48, 53, 64, 75];
      canvasFunction();
    }
  }
};
  // 绘制图表
  let canvasFunction = () => {
    var chartDom = document.getElementById("centerCityCanvaMain");
    var myChart = echarts.init(chartDom as HTMLElement);
    var option;
    option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow"
        }
      },
      grid: {
        left: "3%",
        right: "4%",
        top: "10%",
        bottom: "10%",
        containLabel: true
      },
      xAxis: {
        type: "value",
        splitLine: "false",
        axisLabel: "false",
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: "category",
        axisTick: "false",
        axisLabel: {
          interval: 0 //0 强制显示所有标签
        },
        data: [
          "哈尔滨",
          "桂林",
          "成都",
          "澳门",
          "香港",
          "武汉",
          "上海",
          "北京",
          "深圳",
          "三亚"
        ]
      },
      series: [
        {
          name: "2011",
          type: "bar",
          barWidth: 10,
          itemStyle: {
            color: barColor.value
          },
          // data: [10, 12, 14, 16, 18, 20, 22, 23, 24, 25]
          data: data1.value
        }
      ]
    };
  
    option && myChart.setOption(option);
  };
  onMounted(() => {
    canvasFunction();
  });
  </script>
  
  <style scoped lang="scss">
  .centerright {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, 0.1);
    border-radius: 8px;
  }
  .header {
    .cityCanvaSelect {
      .cityCanvaSelectContain {
        width: 76px;
        height: 26px;
        border-radius: 4px;
        border: solid 1px rgba(178, 183, 198, 0.54);
      }
      width: 76px;
      height: 26px;
      margin-top: 10px;
      margin-right: 20px;
    }
    .cityCanvaTitle {
      margin-top: 19px;
      margin-left: 20px;
      font-size: 16px;
      font-weight: bolder;
      line-height: 16px;
      color: #1ba9ba;
    }
    width: 100%;
    height: 20%;
    display: flex;
    justify-content: space-between;
  }
  .main ul {
    display: flex;
    padding-left: 20px;
    margin-top: -5px;
    li {
      width: 60px;
      font-size: 12px;
      line-height: 20px;
      text-align: center;
      background: rgb(239, 240, 243);
      border-radius: 5px;
      cursor: pointer;
    }
    .click {
      background: #1ba9ba!important;
      color: white;
    }
  }
  #centerCityCanvaMain {
    width: 100%;
    height: 70%;
  }
  </style>